$(function () {
  let provinceName = "";
  let urlPrefix = "";
  let url = "";

  //设置初始显示的地区地图为云南
  $('.provinceName').val('云南');
  showAreaMap();

  chinaMap();
  //展示全国地图-chart4
  function chinaMap() {
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('chart4'));

    let dataRange =  {
      x: '-1000 px', //图例横轴位置
      y: '-1000 px', //图例纵轴位置
      splitList: [
        { start: 1, end: 1, label: '北京', color: '#cfc5de' },
        { start: 2, end: 2, label: '天津', color: '#f1ebd1' },
        { start: 3, end: 3, label: '上海', color: '#feffdb' },
        { start: 4, end: 4, label: '重庆', color: '#e0cee4' },
        { start: 5, end: 5, label: '河北', color: '#fde8cd' },
        { start: 6, end: 6, label: '河南', color: '#e4f1d7' },
        { start: 7, end: 7, label: '云南', color: '#fffed7' },
        { start: 8, end: 8, label: '辽宁', color: '#e4f1d7' },
        { start: 9, end: 9, label: '黑龙江', color: '#e4f1d7' },
        { start: 10, end: 10, label: '湖南', color: '#fffed7' },
        { start: 11, end: 11, label: '安徽', color: '#fffed8' },
        { start: 12, end: 12, label: '山东', color: '#dccee7' },
        { start: 13, end: 13, label: '新疆', color: '#fffed7' },
        { start: 14, end: 14, label: '江苏', color: '#fce8cd' },
        { start: 15, end: 15, label: '浙江', color: '#ddceeb' },
        { start: 16, end: 16, label: '江西', color: '#e4f1d3' },
        { start: 17, end: 17, label: '湖北', color: '#fde8cd' },
        { start: 18, end: 18, label: '广西', color: '#fde8cd' },
        { start: 19, end: 19, label: '甘肃', color: '#fde8cd' },
        { start: 20, end: 20, label: '山西', color: '#fffdd6' },
        { start: 21, end: 21, label: '内蒙古', color: '#ddcfe6' },
        { start: 22, end: 22, label: '陕西', color: '#fad8e9' },
        { start: 23, end: 23, label: '吉林', color: '#fce8cd' },
        { start: 24, end: 24, label: '福建', color: '#fad8e8' },
        { start: 25, end: 25, label: '贵州', color: '#fad8e8' },
        { start: 26, end: 26, label: '广东', color: '#ddcfe8' },
        { start: 27, end: 27, label: '青海', color: '#fad8e9' },
        { start: 28, end: 28, label: '西藏', color: '#ddcfe6' },
        { start: 29, end: 29, label: '四川', color: '#e4f1d5' },
        { start: 30, end: 30, label: '宁夏', color: '#fefcd5' },
        { start: 31, end: 31, label: '海南', color: '#fad8e9' },
        { start: 32, end: 32, label: '台湾', color: '#fce8cd' },
        { start: 33, end: 33, label: '香港', color: '#dc9bbb' },
        { start: 34, end: 34, label: '澳门', color: '#e0f7cc' }
      ]
    }
    let series = [{
      type: 'map',
      mapType: 'china',
      label: {
        normal: {
          show: true, //显示省份标签
          textStyle: {
            color: "white"
          } //省份标签字体颜色
        },
        emphasis: { //对应的鼠标悬浮效果
          show: true,
          textStyle: {
            color: "#000000"
          }
        }
      },
      aspectScale: 0.75,
      zoom: 1.2,
      //缩放属性
      roam: true,
      itemStyle: {
        normal: {
          borderWidth: .5, //区域边框宽度
          borderColor: '#009fe8', //区域边框颜色
          areaColor: "#ffefd5", //区域颜色
        },
        emphasis: {
          borderWidth: 3,
          borderColor: '#000000',
          areaColor: "red",
        }
      },
      data:[
        {name: '北京',selected: false,value: 0},
        {name: '天津',selected: false,value: 0},
        {name: '上海',selected: false,value: 0},
        {name: '重庆',selected: false,value: 0},
        {name: '河北',selected: false,value: 0},
        {name: '河南',selected: false,value: 0},
        {name: '云南',selected: false,value: 0},
        {name: '辽宁',selected: false,value: 0},
        {name: '黑龙江',selected: false,value: 0},
        {name: '湖南',selected: false,value: 0},
        {name: '安徽',selected: false,value: 0},
        {name: '山东',selected: false,value: 0},
        {name: '新疆',selected: false,value: 0},
        {name: '江苏',selected: false,value: 0},
        {name: '浙江',selected: false,value: 0},
        {name: '江西',selected: false,value: 0},
        {name: '湖北',selected: false,value: 0},
        {name: '广西',selected: false,value: 0},
        {name: '甘肃',selected: false,value: 0},
        {name: '山西',selected: false,value: 0},
        {name: '内蒙古',selected: false,value: 0},
        {name: '陕西',selected: false,value: 0},
        {name: '吉林',selected: false,value: 0},
        {name: '福建',selected: false,value: 0},
        {name: '贵州',selected: false,value: 0},
        {name: '广东',selected: false,value: 0},
        {name: '青海',selected: false,value: 0},
        {name: '西藏',selected: false,value: 0},
        {name: '四川',selected: false,value: 0},
        {name: '宁夏',selected: false,value: 0},
        {name: '海南',selected: false,value: 0},
        {name: '台湾',selected: false,value: 0},
        {name: '香港',selected: false,value: 0},
        {name: '澳门',selected: false,value: 0}
      ] //各省地图颜色数据依赖value
    }];


    let option = {
      series: series,
      dataRange: dataRange
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });

    myChart.on('click', function (params) {
      // params.name省份名称
      provinceName = params.name;
      //将名称设置到隐藏域中
      if(provinceName==="陕西"){
        $(".provinceName").val(provinceName+"1");
      }else{
        $(".provinceName").val(provinceName);
      }

      showAreaMap();
    });
  }


  //展示地区地图（点击省份或直辖市地图后）
  function showAreaMap() {
    //将获取到的地区名称转换为拼音小写
    getAreaJSONUrl();

    let myChart = echarts.init(document.getElementById('areaMap'));
    drawMapByUrl(urlPrefix+url, provinceName, myChart);
    //将滚动提示字幕进行显示
    $('#tip').html('<marquee class="roll">若出现地名拥挤，请滚轮放大地图</marquee>');

    myChart.on('click', function (params) {
      //显示具体地区地图并将温湿度图标题改为对应的城市
      areaName = params.name;
      //将areaName设置到id=selectCity的文本框中
      $('.selectCity').html(areaName);
      //将天气信息框显示出来,并将提示信息隐藏
      $('.weather').show();
      $('.weatherTip').hide();
    });
  }


  //获取对应城市的JSONurl
  function getAreaJSONUrl() {
    let name = $(".provinceName").toPinyin().trim().toLowerCase().replaceAll(" ","");
    //处理多音字或者有问题的字符串
    if(name==='xicang') name = 'xizang';
    else if(name==='namenggu') name = 'neimenggu';
    else if(name==='zhongqing') name = 'chongqing';

    urlPrefix = "../../json/regionalDataDisplay/"
    url = name+".json";
  }


  //通过json数据的url来绘制地图
  function drawMapByUrl(url, name, chart) {
    //清除画布
    chart.clear();

    $.get(urlPrefix + url, result => {
      // 注册 echarts 地图
      echarts.registerMap(provinceName, result);
      let option = {

        tooltip: {
          trigger: 'item',
        },
        title: {
          // text: 'xx省/市地图',
          x: "center",
        },
        geo: {
          map: name,
          label: {
            normal: {
              show: true, //显示省份标签
              textStyle: {
                color: "#ffffff"
              } //省份标签字体颜色
            },
            emphasis: { //对应的鼠标悬浮效果
              show: false,
              textStyle: {
                color: "#000000"
              }
            }
          },
          aspectScale: 0.75,
          zoom: 1.2,
          roam: true,
          itemStyle: {
            normal: {
              borderWidth: .5, //区域边框宽度
              borderColor: '#009fe8', //区域边框颜色
              // areaColor: "#000050", //区域颜色
              areaColor: 'rgba(128, 128, 128, 0.1)'
            },
            emphasis: {
              borderWidth: 3,
              borderColor: '#000000',
              areaColor: "red",
            }
          }
        },
        series: [{

          type: 'effectScatter',
          coordinateSystem: 'geo',
          rippleEffect: {
            brushType: 'stroke'
          },
          symbolSize: function (val, params) {
            return 8;
          },
          data: [],
        }]
      };
      chart.setOption(option);
    });
  }

});
